<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">

    <!-- Demo 19 -->
    <h4 id="demo19">Mouse wheel navigation</h4><hr>

    <p>
        You can use the mouse wheel to scroll from one item to next, not necessarily buttons.
        Try scrolling your mouse wheel when you hover over the carousel and see what happens.
        This is not mutually exclusive with the navigation buttons. So, you can use both the
        navigation buttons and the mouse wheel in the same carousel if you want.<br>

        Note: You need the <a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank">Mouse Wheel</a> plugin for this to work.
    </p>

    <div class="custom-container mouseWheel">
        <div class="carousel">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>

<pre class="prettyprint">
$(".mouseWheel .carousel").jCarouselLite({
    mouseWheel: true
});
</pre>

    <script type="text/javascript">
        $(function() {
            $(".mouseWheel .carousel").jCarouselLite({
                mouseWheel: true
            });
        });
    </script>


</div>
</body>
</html>